import styles from '../styles.less';
import {Space, Table, Tag, Pagination, Image} from 'antd';
import {useCallback, useEffect} from 'react';
import {connect} from 'umi';

const DataTable = (props) => {

  const {dispatch, loading, dataTable} = props;
  const {setDetail, tablePayload, setTablePayload} = props.data;

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    dispatch({
      type: 'PVipAuth2/fetchList',
      payload: payload,
    });
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList(tablePayload);
  }, [fetchList, tablePayload]);

  /* 查看详情 */
  function detail(e, record) {
    e.preventDefault();
    setDetail({
      visible: true,
      title: '查看详情',
      data: record,
    });
    return false;
  }

  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center',
      fixed: 'left',
      render: ({}, {}, index) => (
        <span>
          {(tablePayload.pageNum - 1) * tablePayload.pageSize + index + 1}
        </span>
      ),
    },
    {
      title: '授权类型',
      dataIndex: 'type',
      align: 'center',
      width: 100,
      ellipsis: true,
      render: (_, record) => {
        let typeName;
        switch (record.type) {
          case 'wechat':
            typeName = '微信';
            break;
          case 'alipay':
            typeName = '支付宝';
            break;
          case 'douyin':
            typeName = '抖音';
            break;
        }
        return (
          <span>{typeName ? typeName : '-'}</span>
        );
      },
    },
    {
      title: '用户头像',
      dataIndex: 'avatar',
      align: 'center',
      width: 100,
      ellipsis: true,
      render: (_, record) => {
        return (
          <Image
            width={40} height={40} src={record.avatar}
            fallback=""
          />
        );
      },
    },
    {
      title: '用户昵称',
      dataIndex: 'nickname',
      align: 'left',
      width: 180,
      ellipsis: true,
      render: (_, record) => {
        return (
          <span>{record.nickname ? record.nickname : '-'}</span>
        );
      },
    },
    {
      title: '绑定手机',
      dataIndex: 'mobile',
      align: 'left',
      width: 140,
      ellipsis: true,
      render: (_, record) => {
        return (
          <span>{record.mobile ? record.mobile : '-'}</span>
        );
      },
    },
    {
      title: '应用APPID',
      dataIndex: 'appId',
      align: 'left',
      width: 180,
      ellipsis: true,
      render: (_, record) => {
        return (
          <span>{record.appId ? record.appId : '-'}</span>
        );
      },
    },
    {
      title: '授权UNIONID',
      dataIndex: 'unionid',
      align: 'left',
      width: 320,
      ellipsis: true,
      render: (_, record) => {
        return (
          <span style={{wordBreak: 'break-all'}}>{record.unionid ? record.unionid : '-'}</span>
        );
      },
    },
    {
      title: '网页OPENID',
      dataIndex: 'openid',
      align: 'left',
      width: 320,
      ellipsis: true,
      render: (_, record) => {
        return (
          <span style={{wordBreak: 'break-all'}}>{record.openid ? record.openid : '-'}</span>
        );
      },
    },
    {
      title: '小程序OPENID',
      dataIndex: 'mpOpenid',
      align: 'left',
      width: 320,
      ellipsis: true,
      render: (_, record) => {
        return (
          <span style={{wordBreak: 'break-all'}}>{record.mpOpenid ? record.mpOpenid : '-'}</span>
        );
      },
    },
    {
      title: '当前状态',
      dataIndex: 'status',
      align: 'center',
      width: 100,
      ellipsis: true,
      render: (_, record) => {
        return (
          <Tag color={record.status === 1 ? 'geekblue' : 'volcano'}>
            {record.status === 1 ? '正常' : '停用'}
          </Tag>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      width: 160,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      align: 'center',
      width: 100,
      ellipsis: true,
      fixed: 'right',
      render: (_, record) => (
        <Space size='small'>
          <a onClick={e => detail(e, record)}>详情</a>
        </Space>
      ),
    },
  ];

  return (
    <>
      <div className={styles.myDataTable}>
        <Table
          loading={loading}
          className={styles.myTable} bordered={false} size={'middle'} columns={columns}
          dataSource={dataTable.list} rowKey={'id'}
          pagination={false} scroll={{y: '100%'}}
        />
      </div>
      <Pagination
        pageSize={tablePayload.pageSize} current={tablePayload.pageNum} total={dataTable.total}
        className={styles.myPagination} size={'default'} hideOnSinglePage={false}
        showTotal={(total) => {
          return `共 ${total} 条记录`;
        }}
        pageSizeOptions={[15, 30, 60, 120]}
        showSizeChanger showQuickJumper={true}
        onChange={(page, pageSize) => {
          setTablePayload({...tablePayload, pageNum: page, pageSize: pageSize});
        }}
      />
    </>
  );
};

export default connect(({loading, PVipAuth2}) => {
  return {
    loading: loading.effects['PVipAuth2/fetchList'],
    dataTable: PVipAuth2.dataTable,
  };
})(DataTable);
